<script>

export default {
  name: "phoneLogin",
  data() {
    return {
      user:{
        //记录用户名
        userName:'',
        //记录用户密码
        password:'',
      },
      //进行用户输入校验
      rules: {
        userName: [
          { required: true, message: '请输入用户名', trigger: 'blur' },],
        password: [
          { required: true, message: '请输入用户密码', trigger: 'blur' },],
      },

      //表头信息
      heading:'欢迎登录',
      //显示登录选项
      showLogin:true,

    }
  },
  methods: {
    loginUser(){
      this.$refs['LoginRef'].validate((valid) => {
        if(valid){
          //表单验证通过后
          this.$request.post('/UserLogin',this.user).then(res =>{

            if (res.code===1){
              this.$message.success('登录成功')
              localStorage.setItem("u_token",JSON.stringify(res.data.jwt))
              localStorage.setItem("userName",JSON.stringify(res.data.userName))
              this.heading='登录成功，请重新扫描'
              this.showLogin=false
            }else {
              this.$message.error("用户名或密码错误")
            }
          })
        }
      })
    },
  },
  mounted() {

  }
}
</script>

<template>
  <div>
    <header class="header">
      <div class="logo" style="text-align: center">俄罗斯动力质量平台</div>
    </header>
    <div style="font-size: 25px;font-weight: bold;text-align: center;margin-top: 20px">{{heading}}</div>
    <div style="margin-top: 30px" v-if="showLogin">
      <el-form :model="user" :rules="rules" ref="LoginRef">
        <el-form-item prop="userName">
          <el-input prefix-icon="el-icon-user"  placeholder="请输入账号" v-model="user.userName" style="width: 220px"></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input prefix-icon="el-icon-lock"  show-password placeholder="请输入密码" v-model="user.password" style="width: 220px"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button style="width: 220px" @click="loginUser">登&nbsp;&nbsp;&nbsp;&nbsp;录</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<style scoped>
.header {
  padding: 15px;
  background-color: #2c3e50;
  color: white;
  top: 0;
  left: 0;
  width: 100%;
}

.header .logo {
  font-size: 18px;
  font-weight: bold;
  color: #ecf0f1;
}
</style>